<template>
    <el-container ref="homePage" >
        <el-header class="homeHeader">
            <div class="title">123</div>
            <table>
                <tr>
                    <td class="name">{{userInfo.username}}</td>
                    <td>
                        <el-dropdown class="userInfo" @command="handleClick">
                              <span class="el-dropdown-link">
                                       <i><img src="../assets/logo.png"> </i>
                              </span>
                            <template #dropdown>
                                <el-dropdown-menu>
                                    <el-dropdown-item command="userInfo">个人中心</el-dropdown-item>
                                    <el-dropdown-item command="settings">设置</el-dropdown-item>
                                    <el-dropdown-item command="logout">退出</el-dropdown-item>
                                </el-dropdown-menu>
                            </template>
                        </el-dropdown>

                    </td>
                </tr>
            </table>


        </el-header>
        <el-container>
            <el-aside width="200px">

                   <el-menu
                           :unique-opened="true"
                           default-active="2"
                           class="el-menu-vertical-demo"
                           @open="handleOpen"
                           @close="handleClose"
                           @select="menuClick"
                   >
                       <template v-for="item in menuList" >
                       <el-submenu  :index="item.path" v-if="undefined!=item && item.pid == 0 && item.type != 1">
                           <template #title >
                               <i class="el-icon-location"></i>
                               <span>{{item.name}}</span>
                           </template>
                           <template v-if="item.children" >
                               <template v-for="(itemChild , index) in item.children" >
                                   <el-menu-item  :index="itemChild.path" :key="index" v-if="itemChild.name">
                                       <i :class="itemChild.icon"></i>
                                       <span slot="title"  >{{itemChild.name}}</span>
                                   </el-menu-item>
                               </template>
                           </template>
                       </el-submenu>
                       </template>
                   </el-menu>
            </el-aside>


            <el-main>
                <el-breadcrumb v-if="this.$router.currentRoute.value.path !== '/'" style="   position: absolute;">
                    <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
                    <el-breadcrumb-item>{{this.$router.currentRoute.value.name}}</el-breadcrumb-item>
                </el-breadcrumb>

                <div class="homeWelcome" v-if="this.$router.currentRoute.value.path=='/'">
                    欢迎来到房企售！
                </div>

                <router-view/>
            </el-main>


        </el-container>
    </el-container>
</template>

<script>


    import {clearCookie, getCookie, getReq, postReq} from "../utils/api";

    export default {
        name: "Home",
        mounted(){
            this._getUserInfo()
            // 获取浏览器可视区域高度
            this.clientHeight =   `${document.documentElement.clientHeight}`
            window.onresize = function temp() {
                this.clientHeight = `${document.documentElement.clientHeight}`;
            };
        },
        watch: {
            // 如果 `clientHeight` 发生改变，这个函数就会运行
            clientHeight: function () {
                this.changeFixed(this.clientHeight)
            }
        },
        data(){
            return{
                clientHeight:'',
                menuList:[],
                userInfo: {}
            }
        },


        methods:{
            handleOpen(key, keyPath) {
                console.log(key, keyPath);
            },

            _getUserInfo(){

                let userInfo=  sessionStorage.getItem('user')
                let auth= getCookie('Authorization')
                if (userInfo===null||undefined===userInfo||'null'===userInfo||'undefined'===userInfo){
                    if (undefined!==auth&&''!==auth){
                        postReq('/api/sys_user/auth?token='+auth).then(res=>{
                            this.userInfo=JSON.parse(JSON.stringify(res.data.data))
                            console.log('-------d--',this.userInfo)
                            sessionStorage.setItem('user',JSON.stringify(res.data.data))
                            let menuLists =  sessionStorage.getItem('menuList'+auth)
                            if (menuLists!==undefined&&'undefined'!==menuLists&&null != menuLists&&'null'!==menuLists){
                                this.menuList=JSON.parse(menuLists);
                            }else{
                                getReq('/api/sys_resource/list_menus_by_user/'+this.userInfo.id).then(res=>{
                                    let returnData=res.data;
                                    if (undefined === returnData || '' ===returnData || '未登录' === returnData){
                                        this.$router.push({path:'/',query:{}});
                                    }else{
                                        if (undefined != returnData.status&& returnData.status == 500){
                                            this.$router.push({path:'/login',query:{}});
                                        }else{
                                            this.menuList=returnData.data;
                                            sessionStorage.setItem('menuList'+auth,JSON.stringify(this.menuList))
                                        }
                                    }
                                })
                            }
                        })
                    }else{
                        this.$router.push({path:'/login',query:{}});
                    }
                }else{
                    this.userInfo = JSON.parse(userInfo)
                    let menuLists =  sessionStorage.getItem('menuList'+auth)
                    if (menuLists!==undefined&&'undefined'!==menuLists&&null != menuLists&&'null'!==menuLists){
                        this.menuList=JSON.parse(menuLists);
                    }else{
                        getReq('/api/sys_resource/list_menus_by_user/'+this.userInfo.id).then(res=>{
                            let returnData=res.data;
                            if (undefined === returnData || '' ===returnData || '未登录' === returnData){
                                this.$router.push({path:'/login',query:{}});
                            }else{
                                if (undefined != returnData.status&& returnData.status == 500){
                                    this.$router.push({path:'/login',query:{}});
                                }else{
                                    this.menuList=returnData.data;

                                    sessionStorage.setItem('menuList'+auth,JSON.stringify(this.menuList))
                                }
                            }
                        })
                    }
                }
            },
            handleClose(key, keyPath) {
                console.log(key, keyPath);
            },
            changeFixed(clientHeight){ //动态修改样式
                this.$refs.homePage.$el.style.height = clientHeight-20+'px';
            },
            menuClick(key, keyPath){
                if (keyPath[1]===undefined){
                    this.$router.push(key);
                }else{
                    this.$router.push(keyPath[1]);
                }
            },
            handleClick(name){
               if ('logout' === name){
                   this.$confirm('是否确认注销登录?', '提示', {
                       confirmButtonText: '确定',
                       cancelButtonText: '取消',
                       type: 'warning'
                   }).then(() => {
                       this.$router.push('/login')
                       sessionStorage.clear()
                       clearCookie()
                       this.$message({
                           type: 'success',
                           message: '退出成功!'
                       });
                   }).catch(() => {
                       this.$message({
                           type: 'info',
                           message: '退出失败'
                       });
                   });

               }else if ('userInfo'===name){
                   this.$router.push('/sys/user_center?id='+this.userInfo.id)
               }
            }
        }
    }
</script>

<style>

    .el-header {
        position: relative;
        width: 100%;
        height: 60px;
    }


    .el-aside {
        display: block;
        position: absolute;
        left: 0;
        top: 60px;
        bottom: 0;
    }


    .el-main {
        position: absolute;
        left: 200px;
        right: 0;
        top: 60px;
        bottom: 0;
        overflow-y: scroll;
    }

    body > .el-container {
        margin-bottom: 40px;
    }

    /*.el-container:nth-child(5) .el-aside,*/
    /*.el-container:nth-child(6) .el-aside {*/
    /*    line-height: 260px;*/
    /*}*/

    /*.el-container:nth-child(7) .el-aside {*/
    /*    line-height: 320px;*/
    /*}*/

    .homeHeader{
        background: #409eff;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 15px;
        box-sizing: border-box;
    }
    .homeHeader .title{
        font-size: 30px;
        font-family: 华文楷体;
        color: white;
    }
    .name{
        right: auto;
        font-size: 20px;
        font-family: 华文楷体;
        color: white;
    }
    .homeHeader .userInfo{
       cursor: pointer;
    }
    .el-dropdown-link img{
        width: 48px;
        height: 48px;
        border-radius: 24px;
        margin-left: 8px;
    }

    .homeWelcome{
        text-align: center;
        font-size: 30px;
        font-family: 华文楷体;

    }

</style>